<div class="animated fadeIn">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-align-justify"></i>
                    <span th:text="@{'磁盘空间：'+${disk.name}}"></span>
                </div>
                <div class="card-body">

                    <div class=" form-horizontal">
                        <div class="row">

                            <div class="col-md-3">
                                <div id="diskTree"></div>
                            </div>

                            <div class="col-md-9" style="float: right">

                                <div class="layui-btn-group file-table">
                                    <button class="layui-btn layui-btn-sm" data-type="downloadFiles">
                                        <i class="fas fa-cloud-download-alt"></i>下载
                                    </button>

                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                                            id="upload-file">
                                        <i class="fas fa-cloud-upload-alt"></i>上传
                                    </button>

                                </div>

                                <table class="layui-table" id="LAY_table_files" lay-filter="file-table">
                                </table>

                                <script type="text/html" id="fileOpsBar">
                                    <div class="layui-btn-group">
                                        <button class="layui-btn layui-btn-sm" lay-event="download">
                                            <i class="fas fa-cloud-download-alt" title="下载该文件"></i>
                                        </button>
                                        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">
                                            <i class="fas fa-trash-alt" title="删除该文件"></i>
                                        </button>
                                    </div>
                                </script>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <!--/.row-->
        </div>
    </div>
</div>

<link href="./css/bootstrap-treeview.min.css" rel="stylesheet">
<link href="./css/lightbox.min.css" rel="stylesheet" type="text/css">
<script src="./js/bootstrap-treeview.min.js"></script>
<script src="./js/lightbox.min.js"></script>
<script type="text/html" id="previewLink">
    {{#  if(d.iconClass === 'far fa-file-image'){ }}
    <i class="{{d.iconClass}}"></i> <a href="file/preview/{{ d.id}}" data-lightbox="image-set" data-title="{{d.filename}}">{{d.filename}}</a>
    {{#  } }}
    {{#  if(d.iconClass !== 'far fa-file-image'){ }}
    <i class="{{d.iconClass}}"></i> <a href="file/preview/{{ d.id}}" target="_blank">{{d.filename}}</a>
    {{#  } }}
</script>
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['table', 'upload'], function () {
        var table = layui.table,
            upload = layui.upload;

        var parentId = [[${disk.id.toString()}]],
            parent = [[${disk.name}]],
            parentType = 'DISK';

        var uploadInst = upload.render({
            elem: '#upload-file',
            url: '/api/file/upload',
            accept: 'file',
            multiple: true,
            before: function (obj) {
                this.data = {
                    parentId: parentId,
                    parentType: parentType
                };
                //this.data.params = JSON.stringify(this.data.params);
            },
            done: function (res) {
                switch (res.code) {
                    case 0: {
                        reloadFileTable('/api/file/list', parentId, parentType);
                    }
                        break;
                    case -1: {
                        layer.alert(res.msg, {icon: 2});
                    }
                        break;
                }
            },
            allDone: function (obj) { //当文件全部被提交后，才触发
                console.log(obj.total); //得到总文件数
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数
            },
            error: function (res) {
                layer.alert("文件上传失败!", {icon: 2});
            }
        });

        var opt = {
            elem: '#LAY_table_files',
            id: 'file-data',
            url: '/api/file/list?parentId=' + [[${disk.id.toString()}]] + '&parentType=DISK',
            height: '510',
            cellMinWidth: 100,
            page: true, //开启分页,
            limit: 10,
            limits: [10, 50, 100, 200],
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID'},
                    {field: 'filename', title: '文件名', width: 560, templet: '#previewLink'},
                    {field: 'length', title: '大小'},
                    {
                        title: '操作',
                        align: 'center',
                        toolbar: '#fileOpsBar'
                    }
                ]
            ],
            done: function (res, curr, count) {
                $("[data-field='id']").css('display', 'none');
            }
        };
        //方法级渲染
        table.render(opt);

        //监听表格复选框选择
        table.on('checkbox(file-table)', function (obj) {
            console.log(obj)
        });

        //监听工具条
        table.on('tool(file-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'download') {
                //layer.msg('文件ID号：' + data.id + '名称：' + data.filename);
                window.open('file/download/' + data.id);
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除文件: ' + data.filename + ' 吗？', {title: "删除确认"}, function (index) {
                    $.ajax({
                        type: "POST",
                        url: "/api/file/delete",
                        contentType: 'application/json; charset=utf-8',
                        data: data.id, //可选参数
                        dataType: "json",
                        success: function (res) {
                            switch (res.code) {
                                case 0: {
                                    if (res.data === true) {
                                        layer.alert('文件【' + data.filename + '】删除成功!', {
                                            icon: 6, btn: ['确认'], yes: function (index) {
                                                obj.del();
                                                layer.close(index);
                                                var tableFiles = table.render(opt);
                                                tableFiles.reload();
                                            }
                                        });
                                    } else {
                                        layer.alert("文件删除失败!", {icon: 2});
                                    }
                                }
                                    break;
                                case -1: {
                                    layer.alert(res.msg, {icon: 2});
                                }
                                    break;
                            }
                            layer.close(index);
                        }
                    });
                });
            }
        });

        var $ = layui.$, active = {
            downloadFiles: function () { //下载选中的文件
                var checkStatus = table.checkStatus('file-data'),
                    data = checkStatus.data;
                if (data.length > 0) {
                    data1 = data.map(function (value, index, arr) {
                        return value.id;
                    });
                    window.open('/file/zip-package?parent=' + parent + '&ids=' + data1);
                }
            }
        };

        $('.file-table .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#diskTree').treeview({
            data: [[${folderTree}]],
            levels: 10,
            expandIcon: 'fas fa-folder',
            collapseIcon: 'fas fa-folder-open',
            nodeIcon: "fas fa-film",
            onNodeSelected: function (event, data) {
                parentId = data.id;
                parent = data.text;
                parentType = 'FOLDER';
                reloadFileTable('/api/file/list', parentId, parentType);
            },
            onNodeUnselected: function (event, data) {
                parentId = [[${disk.id.toString()}]];
                parent = [[${disk.name}]];
                parentType = 'DISK';
                reloadFileTable('/api/file/list', parentId, parentType);
            }
        });

        function reloadFileTable(restUrl, _parentId, _parentType) {
            table.reload('file-data', {
                url: restUrl,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    parentId: _parentId,
                    parentType: _parentType
                }
            });
        }

        /*]]>*/
    });
</script>
